第 12 屆 iThome 鐵人賽

DAY 8

1

Modern Web

For 前端小幼苗的圖解筆記系列第 8 篇

[HTML] 關於 HTML

12th鐵人賽 html

2020-09-23 23:55:37

1944 瀏覽

分享至

HTML

HTML (是簡稱所以大寫)
HTML 是標記語言不是程式語言（標記 Markup、沒有程式邏輯)
超文本標記語言：重點是「標記」－把文件用標記標起來
描述一個網站的結構語意

簡史

演進：html4.0 → html4.01 → XHTML1.0 → HTML5.0
HTML5 只是HTML最新的修訂版本(2014/06)
廣義論及的 HTML5 =
HTML + CSS + JavaScript（三大中心技術組合）
目的：減少瀏覽器對外掛程式的需求
HTML中新增項（語法特徵）：
- Video、Audio、Canvas、整合SVG
- 加強網頁的文件結構性（語意）

資料結構

做網頁：使用HTML將「文件」轉換成「網頁」
HTML只是把文件標記成網頁
例如手抄資料編輯成Word（設定標題/內文...等）
拿到文件時
- 判斷標題/內文...等(結構)
- 思考如何定義清楚
- 將文件做成標記(HTMLL)
  主標題 -> h1
  副標題 -> h2
  內文 -> p
以正確的標籤賦予它正確的意義
標籤使用會影響搜尋引擎解讀＆盲人檢索
如選單用<nav>包爬蟲才明確知道為主選單
- 網站資訊量很大很多、如何知道網頁的重點是什麼？
  搜尋引擎在爬的時候要分析重點是什麼？
有些是寫給瀏覽器/爬蟲看的　
（<head>裡的 <title>→人、 <meta>→程式）
有些是寫給人看的<body>

標籤

不同的標籤有不同的屬性
<標籤>資料</標籤>
<p> text </p>
<標籤屬性="值">資料</標籤>
<a href=""> LINK </a>
<信收件地址 = "">名字<>
<標籤屬性1="值1" 屬性2="值2">資料</標籤>
<a href="http://google.com" target="_blank"> Google</a>
自閉標籤　<標籤屬性="值">

補充觀念 ID & Class

ID & Class

首字不得為數字、可中線/底線
大小寫不同
其實可以用中文跟Emoji、但實務上不會這麼用
依據ID的唯一性，理論上瀏覽器搜尋到第一個符合的ID就不會繼續搜尋，所以指定ID性能較Class佳，但瀏覽器對＂CSS＂的處理流程找到第一個ID後仍繼續尋找，故以CSS而言選取ID效能沒有較佳

ID

ID 名稱不可重複
一個物件不可有兩個 ID 名
瀏覽器處理CSS樣式時其實多重ID仍會正常顯示
但程式運作（如 JS ）則會有問題

Class

Class可多個、可重複

Name

與後端串接時認Name名

區塊命名

定義區塊常用命名

頂部 header
內容 content / container
尾部 footer
選單 nav / navigation
側欄 sidebar
欄目 column
控制整體佈局寬度 wrap / wrapper
主要區域(通常為頁面主要內容部份) primary
次要區域　(通常為次選單) secondary

參考資料：

個人 Blog: https://eudora.cc/

[Git] 應用情境

[CSS] 元素置中的 N 個方法

系列文

For 前端小幼苗的圖解筆記共 30 篇

目錄

RSS系列文訂閱系列文

62 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙